<!DOCTYPE html>
<html>
<head>
    <include file="Public/head"/>
</head>
<body>

<div class="ui-wrap">

<div class="ui-rank-head">

    <div class="ui-rank-head-info" hidden="hidden">
        <a href="javascript:">规则</a>
        <a href="{:U('Lord/index')}">报名</a>
    </div>

    <div class="ui-rank-head-img">
        <img src="__IMG__/Home/head-img.png"/>
    </div>

    <div class="ui-rank-search">
        <input type="text" name="" id="lord_name" value="" placeholder="群名称/群主昵称" />
        <a id="chekshow">搜索</a>
    </div>

    <div class="ui-rank-head-title">
        <span>群主琅琊榜</span>
    </div>

</div>

<div class="ui-tab-container">

    <div class="ui-tabs-nav">
        <a href="javascript:;" class="swiper-pagination-bullet swiper-pagination-bullet-active">默认</a>
        <a href="javascript:;" class="swiper-pagination-bullet" >排行榜</a>
    </div>
    
    <div class="swiper-wrapper tabs-list">

        <div id='img_ajax' class="swiper-slide show">
            <!--tab1-->
            <ul class="ui-def-list">
                <volist name="list" id="vo">
                    <li>
                        <a href="javascript:;" class="chek_info" lord_id="{$vo.lord_id}">
                            <div class="ui-def-img">
                                <img class="showImg" src="Uploads/{$vo.lord_img|get_cover='path'}"/>
                                <img class="visibility" src="http://placeholder.qiniudn.com/200x220">
                            </div>
                            <div class="ui-def-info">
                                <p class="ui-nowrap">群主：{$vo.user_name}</p>
                                <p class="ui-nowrap">群名：{$vo.lord_name}</p>
                                <!--<p class="ui-nowrap" id="fans_num{$vo.lord_id}">人数：{$vo.fans_num}人</p>-->
                                <p class="ui-nowrap-multi">群宣言：{$vo.lord_manifesto}</p>
                            </div>
                        </a>
                        <div class="ui-def-btn">
                            <a href="javascript:;"><img src="__IMG__/Home/rank-btn-icon.png" width="10" height="11"/><span id="voet_num{$vo.lord_id}">{$vo.voet_num}</span><small>票</small></a>
                            <a href="javascript:;" class="chek_tp" lord_id="{$vo.lord_id}"><span>投一票</span></a>
                        </div>
                    </li>
                </volist>
            </ul>
            <div class="loading visibility">
            	<span class="fa fa-spinner fa-spin"></span><span>加载中...</span>
            </div>
            <div class="loading fx">
            	<span class="fa fa-spinner fa-spin"></span><span>加载中...</span>
            </div>
        </div>

        <div id="tab_ajax" class="swiper-slide">
            <!--tab4-->
            <table class="ranking" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th width="10%">排名</th>
                    <th width="30%">群主</th>
                    <th width="40%">群名称</th>
                    <th width="15%">票数</th>
                    <th width="10%"></th>
                </tr>
                </thead>
                <volist name="arr" id="vo">
                    <tr onclick="checkUrl({$vo.lord_id})">
                        <td width="10%">{$vo.num}</td>
                        <td width="30%">{$vo.user_name}</td>
                        <td width="40%">{$vo.lord_name}</td>
                        <td width="15%">{$vo.voet_num}</td>
                        <td width="10%"><i class="fa fa-ellipsis-h"></i></td>
                    </tr>
                </volist>
            </table>
        </div>

    </div>
	<div class="swiper-scrollbar"></div>
</div><!--end tab-->

<!--tabs-->

<script src="__JS__/zepto.min.js"></script>
<script src="__JS__/dropload.min.js"></script>
<script language="javascript">

    /* 投票 */
   $(document).on('click','.ui-def-list li .chek_info',function(){
        var lord_id = $(this).attr('lord_id');
        window.location.href="__APP__/Home/Lord/lord_info/lord_id/"+lord_id;
    })

    $(document).on('click','.ui-def-list li .chek_tp',function(){
        var lord_id = $(this).attr('lord_id');
        $.ajax({
            url:"{:U('Lord/lord_voet')}",
            type:'post',
            data:{lord_id:lord_id},
            success:function(result){
                if(result.status==1){
                    alert(result.msg);
                    $('#fans_num'+lord_id).text('人数：'+result.fans_num);
                    $('#voet_num'+lord_id).text(result.voet_num);
                }else{
                    alert(result.msg);
                }
            }
        });
    })
    
    function checkAjax(lord_id){
        $.ajax({
            url:"{:U('Lord/lord_voet')}",
            type:'post',
            data:{lord_id:lord_id},
            success:function(result){
                if(result.status==1){
                    alert(result.msg);
                    $('#fans_num'+lord_id).text('人数：'+result.fans_num);
                    $('#voet_num'+lord_id).text(result.voet_num);
                }else{
                    alert(result.msg);
                }
            }
        });
    };

    function checkUrl(lord_id){
        window.location.href="__APP__/Home/Lord/lord_info/lord_id/"+lord_id;
    }

$(function(){
	
    page = 8;
    chek = 1;

    /* 群主查询 */
    document.querySelector('#chekshow').onclick = function () {
        lord_name = $('#lord_name').val();
        window.location.href="__APP__/Home/Lord/rank/lord_name/"+lord_name;
    };

//  var mySwiper = new Swiper('#img_ajax',{
//      onTouchEnd: function(swiper){
//      	console.log(mySwiper.touches);
//      	var height = $('#img_ajax').height();
//      	var scroll_height = mySwiper.touches.startY;
//      	var cunt = scroll_height - height;
//      	
//      	$('.test').html(scroll_height+'\t'+ );
//          if (cunt>0){
//              if(chek == 1){
//                  $('.loading').addClass('show');
//                  ajaxRulset();
//                  chek = 0;
//              }
//          }
//      }
//  })
    
        $(window).scroll(function(){
	        if($(document).scrollTop()>=$(document).height()-$(window).height()){
	            if(chek == 1){
                    $('.loading').addClass('show');
                    ajaxRulset();
                    chek = 0;
                }
	        }
        })

    /* 动态加载数据 */
    function ajaxRulset(){
        $.ajax({
            url:"{:U('Lord/ajaxRulset')}",
            type:'post',
            data:{page:page},
            success:function(result){
                result= $.parseJSON(result);
                if(result.length>=1){
                    $.each( result , function (i,item) {
                        $("<li><a href='javascript:;' class='chek_info' lord_id='"+item.lord_id+"'>"+
                        "<div class='ui-def-img'>"+
                        "<img class='showImg' src='"+item.lord_img+"'/>"+
                        "<img class='visibility' src='http://placeholder.qiniudn.com/200x220'></div>"+
                        "<div class='ui-def-info'>"+
                        "<p class='ui-nowrap'>群主："+item.user_name+"</p>"+
                        "<p class='ui-nowrap'>群名："+item.lord_name+"</p>"+
                        "<p class='ui-nowrap-multi'>群宣言："+item.lord_manifesto+"</p></div></a>"+
                        "<div class='ui-def-btn'>"+
                        "<a href='javascript:;'><img src='__IMG__/Home/rank-btn-icon.png' width='10' height='11'/>" +
                        "<span id='voet_num"+item.lord_id+"'>"+item.voet_num+"</span><small>票</small></a>"+
                        "<a href='javascript:;' class='chek_tp' lord_id='"+item.lord_id+"' ><span>投一票</span></a>"+
                        "</div></li>").appendTo('.ui-def-list');
                    });
                    page+=Number(result.length);
                }else{
                    item = result;
                    $("<li><a href='javascript:;' class='chek_info' lord_id='"+item.lord_id+"'>"+
                    "<div class='ui-def-img'>"+
                    "<img class='showImg' src='Uploads/{$vo.lord_img|get_cover='path'}'/>"+
                    "<img class='visibility' src='http://placeholder.qiniudn.com/200x220'></div>"+
                    "<div class='ui-def-info'>"+
                    "<p class='ui-nowrap'>群主："+item.user_name+"</p>"+
                    "<p class='ui-nowrap'>群名："+item.lord_name+"</p>"+
                    "<p class='ui-nowrap-multi'>群宣言："+item.lord_manifesto+"</p></div></a>"+
                    "<div class='ui-def-btn'>"+
                    "<a href='javascript:;'><img src='__IMG__/Home/rank-btn-icon.png' width='10' height='11'/>" +
                    "<span id='voet_num"+item.lord_id+"'>"+item.voet_num+"</span><small>票</small></a>"+
                    "<a href='javascript:;' class='chek_tp' lord_id='"+item.lord_id+"' ><span>投一票</span></a>"+
                    "</div></li>").appendTo('.ui-def-list');
                }
                chek = 1;
                $('.loading').removeClass('show');
            }
        });
    }

    $('.swiper-pagination-bullet').click(function(){
        $('.swiper-pagination-bullet').removeClass('swiper-pagination-bullet-active');
        $('.tabs-list>.swiper-slide').removeClass('show');
        $(this).addClass('swiper-pagination-bullet-active');
        $('.tabs-list>.swiper-slide').eq($(this).index()).addClass('show');
    });
    
});

</script>
</body>
</html>
